<template>
	<div class="accQuery playerGardeAnalysis" id="playerGardeAnalysis" >
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置/游戏分析/游戏内分析/
				<span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form :model="form"  ref="form" class="demo-form-inline" :inline="true">
					<div class="import">
						<el-form-item label="选择日期" >
							<el-date-picker
							v-model="form.dsearch"
							type="date"
							align="left"
							placeholder="选择日期"
							@change='dateChange' :picker-options="pickerOptions0">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="选择平台">
					      	<el-select v-model="form.platform" filterable placeholder="请选择平台" @change = "selectPlats">
								<el-option v-for="(val,key) in plats" :label="val.label" :value="val.value" :key='key'></el-option>
					      	</el-select>
					    </el-form-item>
						<el-form-item label="选择渠道">
					      	<el-select v-model="form.channel" filterable placeholder="请选择渠道" @change ="selectChannels">
								<el-option v-for="(val,key) in channels" :label="val.label" :value="val.value" :key='key'></el-option>
					      	</el-select>
				   		</el-form-item>
						<el-form-item label="选择区服">
					      	<el-select v-model="form.server" filterable placeholder="请选择区服" @change ="selectServers">
								<el-option v-for="(val,key) in servers" :label="val.label" :value="val.value" :key='key'></el-option>
				      		</el-select>
				    	</el-form-item>
						<el-form-item label="选择职业">
							<el-select v-model="form.job" filterable placeholder="请选择职业">
								<el-option v-for="(val,key) in jobs" :label="val.label" :value="val.value" :key='key'></el-option>
				      		</el-select>
						</el-form-item>
				    </div>
				    <div class="divider2"></div>
				    <div class="import">
						<el-form-item label="对比日期" >
							<el-date-picker
							v-model="form.dcompare"
							type="date"
							align="left"
							placeholder="对比日期"
							@change='dateChange2' :picker-options="pickerOptions0">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="对比平台">
					      	<el-select v-model="form.platform2" filterable placeholder="请选择平台" @change = "selectPlats2">
								<el-option v-for="(val,key) in plats2" :label="val.label" :value="val.value" :key='key'></el-option>
					      	</el-select>
					    </el-form-item>
						<el-form-item label="对比渠道">
					      	<el-select v-model="form.channel2" filterable placeholder="请选择渠道" @change ="selectChannels2">
								<el-option v-for="(val,key) in channels2" :label="val.label" :value="val.value" :key='key'></el-option>
					      	</el-select>
				   		</el-form-item>
						<el-form-item label="对比区服">
					      	<el-select v-model="form.server2" filterable placeholder="请选择区服" @change ="selectServers2">
								<el-option v-for="(val,key) in servers2" :label="val.label" :value="val.value" :key='key'></el-option>
				      		</el-select>
				    	</el-form-item>
						<el-form-item label="对比职业">
							<el-select v-model="form.job2" filterable placeholder="请选择职业">
								<el-option v-for="(val,key) in jobs2" :label="val.label" :value="val.value" :key='key'></el-option>
				      		</el-select>
						</el-form-item>
				    </div>
					<el-form-item  class='conmit'>
						<el-button type="primary" icon="search" @click="search('form')" :disabled="searchable">对比查询</el-button>
						<el-button @click="reset('form')">重置</el-button>
			    	</el-form-item>
				  </el-form>
			</div>

		</div>
		<div class="right_content">
			<div class="listChart1">
		        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
		          <p class='zoomIn animated'>新增角色职业等级分布</p>
		          <div class="chart1-introduce">
		            <el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="新增角色职业等级分布"
		              width="200"
		              trigger="hover"
		              content="新增角色职业等级分布"></el-popover>
		            <i class="el-icon-information" v-popover:listChart1_popo></i>
		          </div>
		        </div>
		        <div style="height:400px;width:100%;position:absolute;" v-loading="loading" element-loading-text="拼命加载中"></div>
		        <div class="chart1" id='chart1'></div>
		        <el-collapse accordion>
		          <el-collapse-item>
		            <template slot="title">
		              点击查看分小时详细数据
		              <el-button type="primary" size="mini" class="excel"  @click.stop="excel('All21','游戏内分析-角色等级-新增角色职业等级分布')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
		                <i class="icon iconfont">&#xe7f0;</i> 导出excel
		              </el-button>
		            </template>
		            <el-table :data="tableData21" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" @sort-change='sortChange'>
						<el-table-column v-for="(val,key) in tableHeaderAll21" :prop="val.prop" :key="key" :label="val.label" :fixed="val.fixed" sortable align="center"></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal">
						</el-pagination>
					</div>
		          </el-collapse-item>
		        </el-collapse>
		    </div>
		    <div class="listChart2">
		        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
		          <p class='zoomIn animated'>次日流失新增角色职业等级分布</p>
		          <div class="chart1-introduce">
		            <el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="次日流失新增角色职业等级分布"
		              width="200"
		              trigger="hover"
		              content="次日流失新增角色职业等级分布"></el-popover>
		            <i class="el-icon-information" v-popover:listChart1_popo></i>
		          </div>
		        </div>
		        <div style="height:400px;width:100%;position:absolute;" v-loading="loading" element-loading-text="拼命加载中"></div>
		        <div class="chart2" id='chart2'></div>
		        <el-collapse accordion>
		          <el-collapse-item>
		            <template slot="title">
		              点击查看分小时详细数据
		              <el-button type="primary" size="mini" class="excel"  @click.stop="excel('All22','游戏内分析-角色等级-次日流失新增角色职业等级分布')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
		                <i class="icon iconfont">&#xe7f0;</i> 导出excel
		              </el-button>
		            </template>
		            <el-table :data="tableData22" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" @sort-change='sortChange2'>
						<el-table-column v-for="(val,key) in tableHeaderAll22" :prop="val.prop" :key="key" :label="val.label" :fixed="val.fixed" sortable align="center"></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal">
						</el-pagination>
					</div>
		          </el-collapse-item>
		        </el-collapse>
		    </div>
		    <div class="listChart3">
		        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
		          <p class='zoomIn animated'>活跃角色职业等级分布</p>
		          <div class="chart1-introduce">
		            <el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="活跃角色职业等级分布"
		              width="200"
		              trigger="hover"
		              content="活跃角色职业等级分布"></el-popover>
		            <i class="el-icon-information" v-popover:listChart1_popo></i>
		          </div>
		        </div>
		        <div style="height:400px;width:100%;position:absolute;" v-loading="loading" element-loading-text="拼命加载中"></div>
		        <div class="chart3" id='chart3'></div>
		        <el-collapse accordion>
		          <el-collapse-item>
		            <template slot="title">
		              点击查看分小时详细数据
		              <el-button type="primary" size="mini" class="excel"  @click.stop="excel('All23','游戏内分析-角色等级-活跃角色职业等级分布')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
		                <i class="icon iconfont">&#xe7f0;</i> 导出excel
		              </el-button>
		            </template>
		            <el-table :data="tableData23" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"  @sort-change='sortChange3' >
						<el-table-column v-for="(val,key) in tableHeaderAll23" :prop="val.prop" :key="key" :label="val.label" :fixed="val.fixed" align="center" sortable ></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange3"
							@current-change="handleCurrentChange3"
							:current-page="page3.currentPage"
							:page-sizes="page3.pageSizes"
							:page-size="page3.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page3.dataTotal">
						</el-pagination>
					</div>
		          </el-collapse-item>
		        </el-collapse>
		    </div>
		     <div class="listChart4">
		        <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
		          <p class='zoomIn animated'>角色职业等级通过率</p>
		          <div class="chart1-introduce">
		            <el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="角色职业等级通过率"
		              width="200"
		              trigger="hover"
		              content="角色职业等级通过率"></el-popover>
		            <i class="el-icon-information" v-popover:listChart1_popo></i>
		          </div>
		        </div>
		        <el-collapse accordion>
		          <el-collapse-item>
		            <template slot="title">
		              点击查看详细数据
		              <el-button type="primary" size="mini" class="excel"  @click.stop="excel('All24','游戏内分析-角色等级-角色职业等级通过率')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
		                <i class="icon iconfont">&#xe7f0;</i> 导出excel
		              </el-button>
		            </template>
		            <el-table :data="tableData24" border style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" @sort-change='sortChange4'>
						<el-table-column v-for="(val,key) in tableHeaderAll24" :prop="val.prop" :key="key" :label="val.label" :fixed="val.fixed" align="center"  sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange4"
							@current-change="handleCurrentChange4"
							:current-page="page4.currentPage"
							:page-sizes="page4.pageSizes"
							:page-size="page4.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page4.dataTotal">
						</el-pagination>
					</div>
		          </el-collapse-item>
		        </el-collapse>
		    </div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./playerGardeAnalysis.styl"></style>
<script src="./playerGardeAnalysis.js"></script>